<template>
  <div>
    <el-container class="main-el-contarner">
      <el-main>
        <div class="kanbao-bigbox">
          <div class="righttop-search-box">
            <el-form
              :inline="true"
              :model="param"
              label-width="100px"
              @submit.native.prevent
            >
              <el-form-item label="通知类型：" label-width="90px">
                <el-select
                  v-model="param.warnStatus"
                  placeholder="选择通知类型"
                  :clearable="true"
                  size="small"
                  style="width: 150px"
                  @clear="delValue"
                >
                  <el-option label="故障通知" value="1"></el-option>
                  <el-option label="离线通知" value="2"></el-option>
                  <el-option label="消防通知" value="3"></el-option>
                  <el-option label="周界通知" value="4"></el-option>
                  <el-option label="周位通知" value="5"></el-option>
                  <!-- <el-option v-for="item in selectoptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option> -->
                </el-select>
              </el-form-item>
              <el-form-item label="" label-width="10px">
                <el-input
                  placeholder="请输入通知模板名称关键字检索"
                  clearable
                  v-model="param.name"
                  size="small"
                  style="width: 350px"
                  @keyup.enter.native="onSearch"
                >
                  <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small" @click="onSearch">查找</el-button>
              </el-form-item>
              <el-form-item style="float: right">
                <el-button
                  type="text"
                  v-if="selectionChangeData == ''"
                  disabled
                  style="color: #cdc5bf"
                  ><i class="el-icon-delete"></i>删除数据</el-button
                >
                <el-button type="text" v-else style="color: #ff0000" @click="delClick"
                  ><i class="el-icon-delete"></i> 删除数据</el-button
                >
              </el-form-item>
              <el-form-item style="float: right">
                <el-button
                  type="text"
                  style="color: #18bc9c"
                  @click="handleAdd"
                  id="yourElement"
                  ><i class="el-icon-plus"></i> 新增模板</el-button
                >
              </el-form-item>
              <el-form-item style="float: right" v-if="statusData == '0'">
                <el-button
                  size="mini"
                  type="danger"
                  @click="forbiddenClick"
                  style="color: #ffffff"
                  ><i class="el-icon-video-pause"></i> 禁用</el-button
                >
              </el-form-item>
              <el-form-item style="float: right" v-if="statusData == '1'">
                <el-button
                  size="mini"
                  type="primary"
                  @click="forbiddenClick"
                  style="color: #ffffff"
                  ><i class="el-icon-video-play"></i> 启用</el-button
                >
              </el-form-item>
              <el-form-item style="float: right" v-if="statusData == ''">
                <el-button disabled size="mini" type="danger" style="color: #ffffff"
                  ><i class="el-icon-video-pause"></i> 禁用</el-button
                >
              </el-form-item>
              <el-form-item style="float: right" v-if="statusData == ''">
                <el-button disabled size="mini" type="primary" style="color: #ffffff"
                  ><i class="el-icon-video-play"></i> 启用</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div
            class="container-box"
            v-loading="loading"
            element-loading-text="数据加载中"
            element-loading-spinner="el-icon-loading"
          >
            <el-table
              :data="tabledatas"
              border
              stripe
              max-height="480px"
              @row-dblclick="rowdbclick"
              :header-cell-style="{
                background: '#cfcfcf',
                color: '#000000',
                'text-align': 'center',
              }"
              :cell-style="{ 'text-align': 'center' }"
              style="width: 100%"
              size="small"
              ref="talbes"
              @selection-change="selectionChange"
              @row-click="handleRowClick"
            >
              <el-table-column
                type="selection"
                header-align="center"
                width="60"
              ></el-table-column>
              <el-table-column
                type="index"
                label="序号ID"
                :index="indexMethod"
                align="center"
                width="100"
              ></el-table-column>
              <el-table-column prop="template_name" label="通知模板名称" width="250">
              </el-table-column>
              <el-table-column prop="inform_type" label="通知类型" width="150">
                <template #default="scope">
                  <span v-if="scope.row.inform_type == 1">故障通知</span>
                  <span v-if="scope.row.inform_type == 2">离线通知</span>
                  <span v-if="scope.row.inform_type == 3">消防通知</span>
                  <span v-if="scope.row.inform_type == 4">周界通知</span>
                  <span v-if="scope.row.inform_type == 5">周位通知</span>
                </template>
              </el-table-column>
              <el-table-column prop="user_name" label="通知对象" width="150">
              </el-table-column>
              <el-table-column prop="auditing" label="启动状态" width="150">
                <template slot-scope="scope">
                  <span v-if="scope.row.auditing == '0'">启用</span>
                  <span v-else-if="scope.row.auditing == '1'">禁用</span>
                  <span v-else>/</span>
                </template>
              </el-table-column>
              <el-table-column prop="inform_way" label="通知方式" width="130px">
                <template #default="scope">
                  <div v-for="(val, index) in scope.row.inform_way" :key="index">
                    <span v-if="val == '1'">企业微信</span>
                    <span v-if="val == '2'">钉钉</span>
                    <span v-if="val == '3'">邮件</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="inform_content" label="通知内容"> </el-table-column>
              <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                  <el-button
                    @click="editClick(scope)"
                    type="text"
                    icon="el-icon-edit"
                    style="color: #18bc9c; margin: 5px; padding: 0px"
                    >编辑</el-button
                  >
                  <!-- <el-button @click="delClick(scope.row)" type="text" icon="el-icon-delete"
                    style="color: #FF0000;margin:5px;padding:0px;">删除</el-button> -->
                </template>
              </el-table-column>
            </el-table>

            <div class="pagebox">
              <el-pagination
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page="param.pager"
                :page-sizes="[10, 30, 50, 100, 500]"
                :page-size="param.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="dataTotal"
              >
              </el-pagination>
            </div>
          </div>
        </div>
        <div>
          <!-- :class="dialogFormVisible == true ? 'action01' : 'action02'" -->
          <el-dialog
            v-if="dialogFormVisible"
            v-dialogDrag
            :title="dialogtitle"
            :visible.sync="dialogFormVisible"
            width="70%"
            top="30px"
            class="action01"
            :before-close="handleClose"
          >
            <el-form
              :model="formdata.datas[0]"
              :inline="true"
              :rules="rules"
              ref="formdata"
            >
              <el-form-item
                label="模板名称"
                :label-width="formLabelWidth"
                prop="template_name"
              >
                <el-input
                  v-model="formdata.datas[0].template_name"
                  autocomplete="off"
                  style="width: 215px"
                  placeholder="模板名称"
                ></el-input>
              </el-form-item>
              <el-form-item label="通知方式" :label-width="formLabelWidth">
                <!-- <el-input v-model="formdata.datas[0].inform_way" autocomplete="off" style="width: 215px;" placeholder="通知方式"></el-input> -->
                <el-select
                  v-model="formdata.datas[0].inform_way"
                  @change="wayChange(formdata.datas[0].inform_way)"
                  multiple
                  placeholder="通知方式"
                  class="wayCss"
                >
                  <!-- <el-option label="APP" value="1"></el-option>
                  <el-option label="WEB" value="2"></el-option>
                  <el-option label="小程序" value="3"></el-option>
                  <el-option label="手机" value="4"></el-option> -->
                  <el-option
                    v-for="item in infoSelectWay"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>

              <el-form-item
                label="通知类型"
                :label-width="formLabelWidth"
                prop="inform_type"
              >
                <el-select
                  v-model="formdata.datas[0].inform_type"
                  placeholder="选择类型"
                  style="width: 215px"
                >
                  <el-option label="故障通知" value="1"></el-option>
                  <el-option label="离线通知" value="2"></el-option>
                  <el-option label="消防通知" value="3"></el-option>
                  <el-option label="周界通知" value="4"></el-option>
                  <el-option label="周位通知" value="5"></el-option>
                </el-select>
                <!-- <el-input v-model="formdata.datas[0].inform_type" autocomplete="off" style="width: 215px;" placeholder="通知类型"></el-input> -->
              </el-form-item>
              <el-form-item
                label="启用状态"
                v-if="formdata.datas[0].template_id != ''"
                :label-width="formLabelWidth"
              >
                <el-select
                  v-model="formdata.datas[0].auditing"
                  placeholder="选择状态"
                  disabled
                  style="width: 215px"
                >
                  <el-option label="启用" value="1"></el-option>
                  <el-option label="禁用" value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="启用状态"
                v-else
                :label-width="formLabelWidth"
                prop="auditing"
              >
                <el-select
                  v-model="formdata.datas[0].auditing"
                  placeholder="选择状态"
                  style="width: 215px"
                >
                  <el-option label="启用" value="1"></el-option>
                  <el-option label="禁用" value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="通知对象"
                :label-width="formLabelWidth"
                prop="user_name"
              >
                <el-input
                  v-model="formdata.datas[0].user_name"
                  style="width: 560px"
                  autocomplete="off"
                  placeholder="通知对象"
                >
                  <i slot="suffix" class="el-icon-more" @click="loadUser"></i>
                </el-input>
              </el-form-item>
              <el-form-item label="通知内容" :label-width="formLabelWidth">
                <el-input
                  v-model="formdata.datas[0].inform_content"
                  type="textarea"
                  style="width: 560px"
                  autocomplete="off"
                  placeholder="通知内容"
                ></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="handleClose">取 消</el-button>
              <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </el-main>
    </el-container>
    <systemuser ref="userNameRef" @getUserData="handleUserData"></systemuser>
  </div>
</template>

<script>
import SideHeader from "@/views/inc/SideHeader";
import Navlanmu from "@/views/inc/Navlanmu";
import LeftMenuMessage from "@/views/inc/LeftMenuMessage";
import systemuser from "@/views/message/components/systemuser.vue";
import $ from "jquery";
import { getDateTimes, numFormat, getDateWeek } from "@/utils/index.js";
import { getlist, getgridsave, getdeletes, getexpro } from "@/api/message/list";

export default {
  name: "NoticeTemplate",
  components: { SideHeader, Navlanmu, LeftMenuMessage, systemuser },
  data() {
    return {
      loading: false,
      selectionChangeData: [],
      loadingdata1: false,
      isloading: false,
      way: "",
      param: {
        funId: "msg_inform_template",
        baseSQL: "",
        warnStatus: "",
        name: "",
        offset: 0,
        pager: 1,
        limit: 10,
      },
      dataTotal: 0,
      tabledatas: [],
      dialogFormVisible: false,
      dialoguser: false,
      dialogtitle: "",
      formdata: {
        funId: "msg_inform_template",
        is_iot: false,
        datas: [
          {
            // template_id:'',
            template_name: "",
            inform_type: "",
            inform_content: "",
            auditing: "",
            inform_way: "",
            user_name: "",
            user_id: "",
          },
        ],
      },
      infoSelectWay: [
        { label: "企业微信", value: "1" },
        { label: "钉钉", value: "2" },
        { label: "邮件", value: "3" },
      ],
      formLabelWidth: "120px",
      rules: {
        template_name: [{ required: true, message: "模板名称必填", trigger: "blur" }],
        inform_way: [{ required: true, message: "通知方式必填", trigger: "blur" }],
        inform_type: [{ required: true, message: "通知类型必填", trigger: "blur" }],
        user_name: [{ required: true, message: "通知对象必填", trigger: "blur" }],
        auditing: [{ required: true, message: "启用状态必填", trigger: "blur" }],
      },
      selectoptions: "",
      statusData: "",
      userData: [],
    };
  },
  mounted() {
    //
    this.getDatas();
  },
  created() {
    this.isloading = false;
    //  this.getDatas()
  },
  methods: {
    wayChange(value) {
      this.$forceUpdate();
    },
    loadUser() {
      // this.dialoguser = true
      this.$refs.userNameRef.handleShowUser();
      this.formdata.datas[0].user_name = "";
      this.formdata.datas[0].user_id = "";
    },

    //获取用户数据
    handleUserData(val) {
      val.forEach((item) => {
        this.formdata.datas[0].user_name += item.user_name + ";";
        this.formdata.datas[0].user_id += item.user_id + ";";
      });
      this.$refs["formdata"].validate((valid) => {});
    },
    //判断表单是否变化
    handleClose() {
      let num = 0;
      for (const key in this.formdata.datas[0]) {
        if (this.formdata.datas[0][key] == "") {
          // num = num + 0
          num += 0;
        } else if (this.formdata.datas[0][key] == null) {
          // num = num + 0
          num += 0;
        } else {
          // num = num + 1
          num += 1;
        }
      }
      if (this.dialogtitle == "新增模板信息") {
        if (num != 0) {
          this.$confirm("表单未保存,是否关闭?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.dialogFormVisible = false;
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "取消关闭",
              });
            });
        } else {
          this.dialogFormVisible = false;
        }
      } else {
        // console.log('222',JSON.stringify(this.formData.datas[0]))
        // console.log('22222',sessionStorage.getItem("initForm"))
        if (
          JSON.stringify(this.formdata.datas[0]) == sessionStorage.getItem("initForm")
        ) {
          this.dialogFormVisible = false;
        } else {
          this.$confirm("表单未保存,是否关闭?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.dialogFormVisible = false;
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "取消关闭",
              });
            });
        }
      }
      // console.log('num',num)
    },
    //禁用启用按钮
    forbiddenClick() {
      // this.loading = true
      let fromData = {
        funId: "msg_inform_template",
        is_iot: false,
        datas: [{}],
      };
      let statusName = "";
      fromData.datas = this.selectionChangeData;
      // if (this.statusData == '0') {
      //   for (let i = 0; i < fromData.datas.length; i++) {
      //     fromData.datas[i].auditing = '1'
      //   }
      //   statusName = '禁用'
      // }
      // if (this.statusData == '1') {
      //   for (let i = 0; i < fromData.datas.length; i++) {
      //     fromData.datas[i].auditing = '0'
      //   }
      //   statusName = '启用'
      // }
      for (let i = 0; i < fromData.datas.length; i++) {
        if (fromData.datas[i].auditing != this.statusData) {
          this.$message({
            message: "只能选择相同状态记录，进行启用/禁用",
            type: "error",
          });
          this.getDatas();
          this.toggleSelection(fromData.datas);
          return false;
        } else if (this.statusData == "0") {
          fromData.datas[i].auditing = "1";
          statusName = "禁用";
        } else if (this.statusData == "1") {
          fromData.datas[i].auditing = "0";
          statusName = "启用";
        }
      }
      this.$confirm(
        `当前选择了${this.selectionChangeData.length}条数据, 是否${statusName}?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          getgridsave(fromData).then((res) => {
            if (res.data.code == "200") {
              this.$message({
                message: "修改启用状态成功",
                type: "success",
              });
              this.loading = false;
              this.getDatas();
              this.toggleSelection(e);
            } else {
              this.$message({
                message: "修改启用状态失败",
                type: "error",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "warning",
            message: `已取消${statusName}`,
          });
          this.getDatas();
          this.loading = false;
        });
    },
    //新增按钮
    handleAdd: function () {
      if (this.$refs["formdata"]) {
        this.$refs["formdata"].resetFields();
      }
      this.dialogFormVisible = true;
      $("#yourElement").addClass("animated bounceOutLeft");
      this.formdata.datas[0].template_id = "";
      this.formdata.datas[0].template_name = "";
      this.formdata.datas[0].inform_type = "";
      this.formdata.datas[0].inform_content = "";
      this.formdata.datas[0].auditing = "";
      this.formdata.datas[0].inform_way = "";
      this.formdata.datas[0].user_name = "";
      this.dialogtitle = "新增模板信息";
    },
    //添加数据
    addtemplate() {
      this.formdata.datas[0].inform_way = this.formdata.datas[0].inform_way.join(";");
      // console.log('this.formdata',this.formdata)
      getgridsave(this.formdata).then((res) => {
        if (res.data.code == "200") {
          this.$message({
            message: "添加告警成功",
            type: "success",
          });
          this.getDatas();
        } else {
          this.$message({
            message: "添加告警失败",
            type: "error",
          });
        }
      });
    },
    //修改数据
    updatetemplate() {
      this.formdata.datas[0].inform_way = this.formdata.datas[0].inform_way.join(";");
      getgridsave(this.formdata).then((res) => {
        if (res.data.code == "200") {
          this.$message({
            message: "修改告警成功",
            type: "success",
          });
          this.getDatas();
        } else {
          this.$message({
            message: "修改告警失败",
            type: "error",
          });
        }
      });
    },
    // 数据搜索按钮
    onSearch() {
      this.param.pager = 1;
      this.getDatas();
      // console.log('param.warnStatus',this.param.warnStatus)
    },
    // 复选框按钮
    selectionChange(e) {
      // console.log("selectionChange", e);
      if (e.length == 0) {
        this.statusData = "";
        this.selectionChangeData = "";
      } else {
        this.statusData = e[0].auditing;
        this.selectionChangeData = e;
      }
    },
    handleRowClick(e) {
      this.$refs.talbes.toggleRowSelection(e);
      const _selectData = this.$refs.talbes.selection;
      this.selectionChange(_selectData);
    },
    //清空多选
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.talbes.toggleRowSelection(row, false);
        });
        this.selectionChangeData = "";
      } else {
        this.$refs.talbes.clearSelection();
      }
    },
    indexMethod(index) {
      return (this.param.pager - 1) * this.param.limit + index + 1;
    },
    sizeChange(val) {
      // console.log('val',val)
      this.param.limit = val;
      this.getDatas();
    },
    currentChange(val) {
      // console.log('val',val)
      this.param.pager = val;
      this.param.offset = (val - 1) * this.param.limit;
      this.getDatas();
    },
    //保存按钮
    confirm() {
      this.$refs["formdata"].validate((valid) => {
        if (valid) {
          // console.log('valid',valid)
          if (this.formdata.datas[0].template_id) {
            this.updatetemplate();
            this.dialogFormVisible = false;
          } else {
            this.addtemplate();
            this.dialogFormVisible = false;
          }
        }
      });
    },
    wayFormat(info) {
      // console.log('info',info.inform_way)
      let wayarr = info.inform_way.split(";");
      return wayarr;
      // let APPName=''
      // let WEBName=''
      // let xcxName=''
      // let sjName=''
      // for(let i=0; i<wayarr.length;i++){
      //   if(wayarr[i]=='1'){
      //     APPName='APP'
      //   }else if(wayarr[i]=='2'){
      //     WEBName='WEB'
      //   }else if(wayarr[i]=='3'){
      //     xcxName=''
      //   }else if(wayarr[i]=='3'){
      //     sjName='WEB'
      //   }
      // }
      // console.log(wayName)
      // console.log(wayarr)
    },
    //编辑按钮
    editClick(info) {
      // console.log('info', info.row)
      this.formdata.datas[0].inform_way = info.row.inform_way.split(";");
      this.formdata.datas[0].auditing = info.row.auditing;
      this.formdata.datas[0].inform_content = info.row.inform_content;
      this.formdata.datas[0].inform_type = info.row.inform_type;
      this.formdata.datas[0].template_id = info.row.template_id;
      this.formdata.datas[0].template_name = info.row.template_name;
      this.formdata.datas[0].user_name = info.row.user_name;
      this.getDatas();
      this.dialogtitle = "修改模板信息";
      this.dialogFormVisible = true;
      // this.formdata.datas[0] = info.row
      if (this.$refs["formdata"]) {
        this.$refs["formdata"].resetFields();
      }
      sessionStorage.setItem("initForm", JSON.stringify(this.formdata.datas[0]));
    },
    //双击打开编辑页面
    rowdbclick(info) {
      this.getDatas();
      this.dialogtitle = "修改告警信息";
      this.dialogFormVisible = true;
      this.formdata.datas[0].inform_way = info.inform_way.split(";");
      this.formdata.datas[0].auditing = info.auditing;
      this.formdata.datas[0].inform_content = info.inform_content;
      this.formdata.datas[0].inform_type = info.inform_type;
      this.formdata.datas[0].template_id = info.template_id;
      this.formdata.datas[0].template_name = info.template_name;
      this.formdata.datas[0].user_name = info.user_name;
      // this.formdata.sessonId='9388bc48-fc19-420a-aa6a-5c710de7ad19'
      if (this.$refs["formdata"]) {
        this.$refs["formdata"].resetFields();
      }
      sessionStorage.setItem("initForm", JSON.stringify(this.formdata.datas[0]));
    },
    //删除按钮
    delClick(info) {
      // console.log('info',info)

      var tablefromdata = {
        funId: "msg_inform_template",
        ids: "",
      };
      // console.log('tablefromdata',tablefromdata)
      this.selectionChangeData.forEach((item) => {
        tablefromdata.ids += item.template_id + ";";
      });
      this.$confirm(`已选择${this.selectionChangeData.length}条数据, 是否删除?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        getdeletes(tablefromdata).then((res) => {
          console.log("res", res);
          // if(res.status=='200'){
          if (res.data.code == "200") {
            this.$message({
              message: "删除告警成功",
              type: "success",
            });
            this.getDatas();
          } else {
            this.$message({
              message: "删除告警失败",
              type: "error",
            });
          }
          // }
          // else{
          //   this.$message({
          //       message: '删除告警失败',
          //       type: 'error'
          //   });
          //}
        });
      });
    },
    delValue() {
      this.getDatas();
    },
    getDatas() {
      if (this.param.warnStatus == "" && this.param.name == "") {
        this.param.baseSQL = "";
      } else {
        // this.param.baseSQL='inform_type like "%'+this.param.warnStatus+'%"'
        // this.param.baseSQL='inform_type="'+this.param.warnStatus+'"'
        this.param.baseSQL =
          'inform_type like "%' +
          this.param.warnStatus +
          '%" and ' +
          'template_name like"%' +
          this.param.name +
          '%"';
      }
      getlist(this.param).then((res) => {
        if (res.status == "200") {
          let resdata = res.data;
          this.tabledatas = resdata.rows;
          this.dataTotal = resdata.total;
          let newData = [];
          resdata.rows.forEach((item) => {
            if (item.auditing == 0) {
              newData.push({
                value: item.inform_type,
                label: item.inform_type,
                auditing: item.auditing,
              });
            }
          });
          this.selectoptions = this.unique(newData);
        }
      });
    },
    //筛选重复字段
    unique(arr) {
      const res = new Map();
      return arr.filter((arr) => !res.has(arr.value) && res.set(arr.value, 1));
    },
  },
};
</script>
<style>
.dialog-footer {
  margin-top: -50px;
}

.kanbao-bigbox .el-loading-spinner .el-loading-text {
  color: #666 !important;
}

.el-select-dropdown {
  min-width: 200px !important;
}
</style>
<style scoped>
.el-main {
  padding: 0px !important;
}

.kanbao-bigbox {
  margin-top: 0px;
}

/* .el-input__inner{
    height: 38px !important;
  } */
</style>
<style lang="scss" scoped>
.wayCss {
  // ::v-deep {
  //   .el-input__inner {
  //     height: 30px ;
  //     background: rgba(29, 214, 226, 0.1) !important;
  //     border: 1px solid #01DEEF !important;
  //   }
  // }

  // height: 0px !important;
  // height: 100px !important;
  // height: 0px !important;
  width: 215px !important;
}

.action01 {
  // animation: rotateOut 0.5s;
  animation: scaleDrew 0.5s;
  // animation-iteration-count: 1;
}

@keyframes scaleDrew {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }

  // 50%{
  //   transform: scale(1);
  // }
  // 75%{
  //   transform: scale(1.05);
  // }
}

// .action02 {
//   animation: rotateOut 0.5s;
//   animation-iteration-count: 1;
// }

.righttop-search-box {
  background: #f8f8f8;
  padding: 8px 20px 7px 20px;
  border-bottom: 1px solid #ececec;
  position: fixed;
  top: 0;
  width: calc(100% - 55px);
  z-index: 4;
}

.righttop-search-box .el-form-item {
  margin-bottom: 0px !important;
}

.container-box {
  padding: 10px;
  margin: 50px 0;
}

.pagebox {
  text-align: right;
  padding: 10px;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  background-color: #ececec;
  z-index: 4;
}
</style>
